<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index2.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/font/iconfont.css" />
    <link rel="stylesheet" href="./css/FM.css" />
  </head>
  <body>
    <!-- 头部 start-->
    <header id="top">
      <div class="header_top">
        <div class="header_topbar fr">
          <div class="topbar_login">
            <p class="p1">
              <a href="./logon2.html">登录</a>&nbsp;或&nbsp;<a
                href="./regj2.html"
                >注册</a
              >&nbsp;ANTA会员
            </p>
            <p class="p2" style="display: none">
              <a href="javascript:;">欢迎：<span></span></a>
            </p>
          </div>
          <div class="topbar_cart">
            <a href="./cart2.html" class="iconfont icon-gouwuchefill"></a>
          </div>
          <div class="topbar_service">
            <a href="javascript:;" class="iconfont icon-custom-service"></a>
          </div>
          <div class="topbar_en">
            <a href="javascript:;">EN</a>
          </div>
        </div>
      </div>
      <div class="header_bottom">
        <div class="header_logo fl">
          <a href="./index2.html">
            <img src="./img/logo-anta.svg" alt="" width="" />
          </a>
        </div>
        <ul class="header_nav fr">
          <li class="nav_item">
            <a href="./list2.html">冬奥国旗款</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">男子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">运动鞋</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">户外综训鞋</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">外套夹克</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">运动裤</a></li>
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜子</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">运动项目</a></li>
                  <li><a href="javascript:;">跑步</a></li>
                  <li><a href="javascript:;">篮球</a></li>
                  <li><a href="javascript:;">综训</a></li>
                  <li><a href="javascript:;">生活</a></li>
                  <li><a href="javascript:;">健身</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">女子</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">棉鞋</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服装</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服/马甲</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配件</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <li><a href="javascript:;">运动袜类</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">儿童</a>
            <div class="menu_two">
              <div class="menu_inner">
                <ul class="cate_list">
                  <li><a href="javascript:;">新品上市</a></li>
                  <li><a href="javascript:;">男中大童</a></li>
                  <li><a href="javascript:;">女中大童</a></li>
                  <li><a href="javascript:;">男小童</a></li>
                  <li><a href="javascript:;">女小童</a></li>
                  <li><a href="javascript:;">婴童</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有鞋类</a></li>
                  <li><a href="javascript:;">跑鞋</a></li>
                  <li><a href="javascript:;">篮球鞋</a></li>
                  <li><a href="javascript:;">休闲鞋</a></li>
                  <li><a href="javascript:;">板鞋</a></li>
                  <li><a href="javascript:;">足球鞋</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list">
                  <li><a href="javascript:;">所有服饰</a></li>
                  <li><a href="javascript:;">套头卫衣</a></li>
                  <li><a href="javascript:;">羽绒服</a></li>
                  <li><a href="javascript:;">短袖T恤</a></li>
                  <li><a href="javascript:;">运动短裤</a></li>
                  <li><a href="javascript:;">长裤</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
                <ul class="cate_list" style="border-right: 0">
                  <li><a href="javascript:;">所有配饰</a></li>
                  <li><a href="javascript:;">包类</a></li>
                  <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li>
                                <li><a href="javascript:;">所有鞋类</a></li> -->
                </ul>
              </div>
            </div>
          </li>
          <li class="nav_item">
            <a href="javascript:;">安踏儿童</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">品牌文化</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">观赏视频</a>
          </li>
          <li class="nav_item">
            <a href="javascript:;">联系我们</a>
          </li>
          <li class="nav_item last_li">
            <div class="nav_search">
              <a
                href="javascript:;"
                class="nav_search_btn iconfont icon-xiangshang"
              ></a>
              <input type="text" class="nav_search_ipt" placeholder="搜索" />
            </div>
          </li>
        </ul>
      </div>
    </header>
    <!-- 头部 end-->
    <!-- 脚部 start -->
    <!-- 主体 start -->
    <main>
      <div class="main_magnifier">
        <!-- 放大镜盒子 -->
        <div class="magnifier_box fl">
          <div class="magnifier_view fl">
            <div class="magnifier_smallImgs">
              <ul id="tap_img">
                <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
                <li class="i">
                  <a href="javascript:;"
                    ><img src="./img/list-goods.jpg" alt=""
                  /></a>
                </li>
                <li class="i">
                  <a href="javascript:;"
                    ><img src="./img/list-goods.jpg" alt=""
                  /></a>
                </li>
                <li class="i">
                  <a href="javascript:;"
                    ><img src="./img/list-goods.jpg" alt=""
                  /></a>
                </li>
                <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
              </ul>
            </div>
            <div class="share_collect">
              <a href="javascript:;" class="share">分享</a>
              <a href="javascript:;" class="collect">收藏</a>
            </div>
          </div>
          <div id="box">
            <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
            <div class="magnifier_smallImg fl" id="smallBox">
              <img src="./img/FM.jpg" alt="" />
              <div id="mask"></div>
            </div>
            <div class="magnifier_bigImg" id="bigBox">
              <img src="./img/FM.jpg" alt="" />
            </div>
            <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
          </div>
        </div>
        <!-- 商品详情 -->
        <div class="product_details fl">
          <div class="details_top">
            <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!! -->
            <p>女子运动上衣</p>
            <h3 class="goods_name">【安踏冠军系列】安踏女运动短袖国旗款冬奥</h3>
            <p class="goods_sn">款号：152150302</p>
            <p class="goods_price">￥399.00</p>
            <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
          </div>
          <div class="details_in">
            <p class="goods_color"></p>
            <ul class="color_list">
              <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
              <li class="color_code">
                <img src="./img/list-goods.jpg" alt="" />
              </li>
              <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
            </ul>
            <!-- 尺码&数量 -->
            <div class="infos_panel">
              <div class="goods_size fl">
                <span>尺码：</span>
                <input type="text" placeholder="M" id="goods_sizes" />
                <i class="iconfont icon-xiangshang"></i>
              </div>
              <div class="goods_num fl">
                <span style="margin-left: 30px">数量：</span>
                <input type="text" placeholder="1" id="goods_nums" />
                <i class="iconfont icon-xiangshang" style="left: 230px"></i>
              </div>
            </div>
            <!-- 优惠卷 -->
            <div class="goods_coupon">
              <div>
                <span>领取优惠卷</span>
                <i class="iconfont icon-xiangshang" style="left: 476px"></i>
              </div>
            </div>
            <div class="goods_btns">
              <a href="javascript:;" class="btn_addCart fl">加入购物车</a>
              <a href="javascript:;" class="btn_toBuy fr">立即购买</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品细节 -->
      <div class="pro_tabs">
        <div class="pro_tabs_l fl">
          <p>
            <span>商品细节</span>
          </p>
          <i></i>
        </div>
        <div class="pro_tabs_r fl"></div>
      </div>
      <div class="pro_details">
        <img src="./img/fm1.jpg" alt="" />
        <img src="./img/fm2.jpg" alt="" />
        <img src="./img/fm3.jpg" alt="" />
        <img src="./img/fm4.jpg" alt="" />
        <img src="./img/fm5.jpg" alt="" />
        <img src="./img/fm6.jpg" alt="" />
      </div>
    </main>
    <!-- 主体 end -->
    <footer>
      <div class="footer_inner">
        <div class="footer_left fl">
          <img src="./img/footer-anta.svg" alt="" />
        </div>
        <div class="footer_right fr">
          <ul class="links_line">
            <li style="border-left: 0">
              <a href="javascript:;">安踏海外</a>
            </li>
            <li>
              <a href="javascript:;">安踏投资者关系</a>
            </li>
          </ul>
          <div class="footer_copyright">
            <div style="margin-bottom: 6px">
              <span>Copyright(C) 2020 by www.ANTA.com</span>
              <span>©安踏体育用品有限公司版权所有</span>
              <a href="javascript:;">营业执照</a>
              <a href="javascript:;">开户许可证</a>
            </div>
            <div>
              <a href="javascript:;">闽ICP备11020421号-1</a>
              <a href="javascript:;">闽公网安备35058202000423号</a>
            </div>
          </div>
          <ul class="links_line">
            <li style="border-left: 0"><a href="javascript:;">安踏儿童</a></li>
            <li><a href="javascript:;">Fila</a></li>
            <li><a href="javascript:;">Kolon Sport</a></li>
            <li><a href="javascript:;">Descente</a></li>
            <li><a href="javascript:;">Sprandi</a></li>
            <li><a href="javascript:;">Kingkow</a></li>
          </ul>
        </div>
      </div>
    </footer>
    <!-- 脚部 end -->
    <!-- 侧边栏 start -->
    <div class="sidebar">
      <a href="javascript:;" class="goto_top"></a>
      <a href="javascript:;" class="goto_cart"></a>
      <a href="javascript:;" class="goto_kefu"></a>
    </div>
    <!-- 侧边栏 end -->
  </body>
</html>
<script src="./node_modules/_jquery@3.6.0@jquery/dist/jquery.min.js"></script>
<script src="./js/anta.js"></script>

<script>
  // 二级菜单
  $(".nav_item")
    .mouseover(function () {
      $(this).find(".menu_two").show();
    })
    .mouseout(function () {
      $(this).find(".menu_two").hide();
    });

  $(function () {
    // console.log(location);
    // 获取商品编号
    let [, goodsId] = location.search.substring(1).split("=");
    // console.log(goodsId);

    // 根据商品编号，获取商品详情
    getGoodsInfo(goodsId);

    //点击添加到购物车
    $(".btn_addCart").on("click", function () {
      // console.log($('.btn_addCart'));
      addShoppingCart(goodsId);
    });
  });
  function getGoodsInfo(goodsId) {
    $.get(
      "./goodsAndShoppingCart/getGoodsInfo.php",
      { goodsId: goodsId },
      function (data) {
        console.log(data);
        let htmlStr1 = `
                    <div class="magnifier_smallImg fl" id="smallBox">
                        <img src="${data.goodsImg}" alt="">
                        <div id="mask"></div>
                    </div>
                    <div class="magnifier_bigImg" id="bigBox">
                        <img src="${data.goodsImg}" alt="">
                    </div>
            `;
        let htmlStr2 = `
                    <p>${data.goodsType}</p>
                    <h3 class="goods_name">${data.goodsName}</h3>
                    <p class="goods_sn">款号：${data.beiyong1}</p>
                    <p class="goods_price">￥${data.goodsPrice}.00</p>
            `;
        let htmlStr3 = `
                            <li class="i">
                                <a href="javascript:;"><img src="${data.beiyong2}" alt=""></a>
                            </li>
                            <li class="i">
                                <a href="javascript:;"><img src="${data.beiyong3}" alt=""></a>
                            </li>
                            <li class="i">
                                <a href="javascript:;"><img src="${data.beiyong4}" alt=""></a>
                            </li>
                            <li class="i">
                                <a href="javascript:;"><img src="${data.beiyong5}" alt=""></a>
                            </li>
            `;
        let htmlStr4 = `
                            <img src="${data.beiyong2}" alt="">
                            <img src="${data.beiyong3}" alt="">
                            <img src="${data.beiyong4}" alt="">
                            <img src="${data.beiyong5}" alt="">
                            <img src="${data.beiyong6}" alt="">
            `;
        let htmlStr5 = `
                        <li class="color_code">
                            <img src="${data.beiyong2}" alt="">
                        </li>
                        <li class="color_code"> 
                            <img src="${data.beiyong3}" alt="">
                        </li>
                        <li class="color_code">
                            <img src="${data.beiyong4}" alt="">
                        </li>
            `;
        //修改放大镜图片
        $("#box").html(htmlStr1);
        //修改商品信息
        $(".details_top").html(htmlStr2);
        //修改放大镜左侧切换小图
        $("#tap_img").html(htmlStr3);
        //修改商品细节图片
        $(".pro_details").html(htmlStr4);
        //修改商品颜色
        $(".color_list").html(htmlStr5);
      },
      "json"
    );
  }

  function addShoppingCart(goodsId) {
    $.post(
      "./goodsAndShoppingCart/addShoppingCart.php",
      {
        vipName: getCookie("username"),
        goodsId: goodsId,
        goodsCount: $("#goods_nums").val(),
      },
      function (data) {
        console.log(data);
        if (data == "1") {
          alert("添加商品成功！");
        } else if (data == "0") {
          alert("添加商品失败！");
        } else {
          alert("出错了！");
        }
      }
    );
  }


  //放大镜
  $("#box").on("mouseenter", function () {
    $("#mask").show();
    $("#bigBox").show();
  });
  $("#box").on("mouseleave", function () {
    $("#mask").hide();
    $("#bigBox").hide();
  });
  $("#box").on("mousemove", "#mask", function (e) {
    let x = e.pageX - $("#box").offset().left - $("#mask").width() / 2;
    let y = e.pageY - $("#box").offset().top - $("#mask").height() / 2;
    if (x < 0) {
      x = 0;
    }
    if (x > $("#box").width() - $("#mask").width()) {
      x = $("#box").width() - $("#mask").width();
    }
    if (y < 0) {
      y = 0;
    }
    if (y > $("#box").height() - $("#mask").height()) {
      y = $("#box").height() - $("#mask").height();
    }

    $("#mask").css({
      left: x,
      top: y,
    });

    var n = x / ($("#box").width() - $("#mask").width());
    var m = y / ($("#box").height() - $("#mask").height());
    $("#bigBox img").css({
      left: -n * ($("#bigBox img").width() - $("#bigBox").width()),
      top: -m * ($("#bigBox img").height() - $("#bigBox").height()),
    });
  });
</script>
